<template>
  <!-- <page-header-wrapper> -->
  <div>

    <div>
      <div class="box flex mb-20">
        <div class="flex-1 item_box" v-for="(item,index) in items" :key="index">
          <div class="flex">
            <i v-if="index == 0" class=" iconfont icon-xuqiu" :class="index == 0 ?'col_0da9b0':''"></i>
            <i v-if="index == 1" class=" iconfont icon-qiye1" :class="index == 1 ?'col_2a51bc':''"></i>
            <i v-if="index == 2" class=" iconfont icon-icon" :class="index == 2 ?'col_2a51bc':''"></i>
            <i v-if="index == 3" class=" iconfont icon-tongji" :class="index == 3 ?'col_0da9b0':''"></i>
            <div class="flex-1">
              <p class="font">{{item.name}}</p>
              <p class="num mouseOn">
                <count-to :startVal="startVal" :endVal="item.endVal" :duration="5000"></count-to>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-card>
      <div class="item_nav_top">
        <a v-for="(item,index) in items1" :key="index" @click="changeStatus(item.index)" :class="currentIndex == item.index ? 'active_a' : ''" class="twoFont">{{ item.name }}</a>
        <a-form-model :model="searchForm" :label-col="{span:2}" :wrapper-col="{span:15}">
          <a-form-model-item label="起止时间">
            <a-range-picker @change="timeSelect" />
          </a-form-model-item>
        </a-form-model>
      </div>
      <div style="margin: 15px">
        <div class="flex">
          <div class="flex-1" id="map" style="height:654px;width: 600px;margin-right: auto"></div>
          <div class="flex-1">
            <p class="wz_title">{{currentIndex == 1?'产品供应分布':'产品需求分布'}} - <span class="jd_title"> 龙华区</span></p>
            <div id="trend" style="height: 383px;  width: 100%;"></div>
          </div>
        </div>
      </div>

    </a-card>

    <div class="mt-20">
      <div class="flex">
        <div class="flex-1 item_bot">

          <div class="flex item_bot_navbar">
            <p class="flex-1">{{currentIndex==1?'全区需求分布占比':'全区产品分布占比'}}</p>

          </div>
          <div id="requestTrend1" style="width: 100%;height:511px"></div>
        </div>
        <div class="flex-1 item_bot ml-20">
          <div class="flex item_bot_navbar">
            <p class="flex-1">{{currentIndex==1?'每日需求趋势':'每日产品趋势'}}</p>
            <!-- <a-select v-model="secondCity" style="width: 120px">
              <a-select-option v-for="citys in city" :key="citys">
                {{ citys }}
              </a-select-option>
            </a-select> -->
          </div>
          <div id="requestTrend2" style="width: 100%;height:511px"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- </page-header-wrapper> -->
</template>

<script>
import { categoryProductStatis, statisticsPassCount } from '@/api/SysStatistics'
import countTo from 'vue-count-to'
import axios from 'axios'
export default {
  components: { countTo },
  data() {
    return {
      searchForm: {
        dateStart: '',
        dateEnd: ''
      },
      EntInfoData: {},
      startVal: 0,
      // endVal: 641234,
      currentIndex: 1,
      items: [
        { name: '需求数', index: 0, endVal: 0 },
        { name: '企业数', index: 1, endVal: 0 },
        { name: '供需匹配数量', index: 1, endVal: 0 },
        { name: '产品数', index: 1, endVal: 0 },
      ],
      items1: [
        { name: '产品供应', index: 1 },
        { name: '产品需求', index: 2 }
      ],
      // secondCity: '全区',
      // city: ['全区', '观澜街道', '大浪街道', '龙华街道', '民治街道', '福城街道', '观湖街道'],
      requestArea: {
        columns: ['产业', '访问用户'],
        rows: [
          { 产业: '机械', 访问用户: 30 },
          { 产业: '电子', 访问用户: 10 },
          { 产业: '轻工', 访问用户: 10 },
          { 产业: '食品', 访问用户: 15 },
          { 产业: '纺织', 访问用户: 5 },
          { 产业: '化工', 访问用户: 20 },
          { 产业: '建材', 访问用户: 10 },
        ],
      },
      poductName: [],
      poductValue: [],
      poductData: [],
      zhuxingdata: [],
    }
  },
  created() {
    this.categoryProductStatis()
    this.statisticsPassCount()
  },
  methods: {
    // 时间筛选
    timeSelect(date, dateString) {
      this.searchForm.dateStart = dateString[0]
      this.searchForm.dateEnd = dateString[1]
      this.categoryProductStatis()
    },
    // 获取需求数，企业数，供需匹配数量，产品数
    statisticsPassCount() {
      statisticsPassCount()
        .then((res) => {
          if (res.code == 200) {
            this.items = [
              { name: '需求数', index: 0, endVal: res.data.materialsCnt },
              { name: '企业数', index: 1, endVal: res.data.entCnt },
              { name: '供需匹配数量', index: 1, endVal: res.data.productSaleCnt },
              { name: '产品数', index: 1, endVal: res.data.materialsCnt + res.data.productCnt },
            ]
          }
        })
        .catch((error) => {})
    },
    //获取统计柱形图，和饼图
    categoryProductStatis() {
      let _params = {
        type: this.currentIndex,
        dateStart: this.searchForm.dateStart,
        dateEnd: this.searchForm.dateEnd
      }
      categoryProductStatis(_params)
        .then((res) => {
          if (res.code == 200) {
            let _poductName = []
            let _poductValue = []
            let _poductData = []
            let _zhuxingdata = []
            let color = ['#e9284f', '#4472f1', '#429ef1', '#54e2be', '#28d2d9', '#fb8e64', '#ff9f00']
            res.data.forEach((element, index) => {
              let _json = {
                value: element.count,
                name: element.keyword,
              }

              let _zhuxingjson = {
                value: element.count,
                itemStyle: {
                  color: color[index],
                },
              }
              _poductName.push(element.keyword)
              _poductValue.push(element.count)
              _poductData.push(_json)
              _zhuxingdata.push(_zhuxingjson)
            })

            this.poductName = _poductName
            this.poductValue = _poductValue
            this.poductData = _poductData
            this.zhuxingdata = _zhuxingdata
            this.showMap()
            this.showTrend()
            this.requestTrend()
            this.GetProportionMap()
          }
        })
        .catch((error) => {})
    },
    changeStatus(index) {
      this.currentIndex = index
      this.categoryProductStatis()
    },
    // 地图
    showMap() {
      // let longhuaData = require('../../assets/LongHua.json')
      // let name = 'bj'
      let myChart = this.$echarts.init(document.getElementById('map'))
      // 地图缓存数据
      let mapCaches = {}
      // 点击进入下一级时，其父级的地图数据对象集合
      let childParentMapObj = {}
      const getAreaMap = areaCode => {
        if(areaCode === 100000 || areaCode === 440000 || areaCode === 440300 || areaCode === 440309) {
          const mapData = require(`../../assets/map/${areaCode}_full.json`)
          return Promise.resolve(mapData)
        }else {
          return Promise.reject(new Error('无此地域数据'))
        }
      }
      // 加载地图
      const loadMap = (map, name, { code }) => {
        let promise = Promise.resolve()
        if(!mapCaches[map]) {
          promise = getAreaMap(code).then(mapData => {
            this.$echarts.registerMap(map, mapData)
            mapCaches[map] = mapData
          })
        }

        promise.then(() => {
          const option = {
            title: {
              text: name,
              left: 'center',
              top: '10%'
            },
            visualMap: {
              min: 0,
              max: 45000,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'], // 文本，默认为数值文本
              calculable: false,
              inRange: {
                color: ['#dbe7ff', '#dbe7ff', '#dbe7ff']
              },
              textStyle: {
                color: '#ffffff'
              }
            },
            series: [
              {
                name: name,
                type: 'map',
                map,
                roam: true,
                top: '20%',
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    textStyle: {
                      color: '#000'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    borderColor: '#fff',
                    areaColor: '#bccdf5'
                  },
                  emphasis: {
                    areaColor: '#4472f1',
                    borderWidth: 1
                  }
                },
                aspectScale: map === 'china' ? 0.75 : 1,
                data: [
                  {
                    name: '广东省',
                    itemStyle: {
                      areaColor: '#4472f1'
                    },
                    label: {
                      show: true
                    }
                  },
                  {
                    name: '深圳市',
                    itemStyle: {
                      areaColor: '#4472f1'
                    },
                    label: {
                      show: true
                    }
                  },
                  {
                    name: '龙华区',
                    itemStyle: {
                      areaColor: '#4472f1'
                    },
                    label: {
                      show: true
                    }
                  }
                ]
              }
            ]
          }

          myChart.clear()
          myChart.setOption(option)
          myChart.off('click')
          myChart.off('dbclick')

          myChart.on('click', param => {
            if(param.name !== (childParentMapObj || {}).name) {
              const mapData = mapCaches[map]
              if(mapData) {
                const mapInfo = mapData.features.find(m => m.properties.name === param.name)
                const properties = mapInfo.properties
                if(typeof properties.adcode !== 'undefined') {
                  loadMap(properties.adcode, properties.name, {
                    code: properties.adcode
                  })
                  childParentMapObj = {
                    map,
                    name,
                    code,
                    parent: childParentMapObj
                  }
                }
              }
            }
          })
        })
      }
      loadMap('china', '中国', {
        code: 100000
      })

      myChart.getZr().on('click', event => {
        if(!event.target) {
          if(childParentMapObj.name) {
            loadMap(childParentMapObj.map, childParentMapObj.name, {
              code: childParentMapObj.code
            })
            if (childParentMapObj.map !== 'china') {
              childParentMapObj = childParentMapObj.parent
            } else {
              childParentMapObj = {}
            }
          }
        }
      })
    },
    // 产品需求分布
    showTrend() {
      let that = this
      let trend = this.$echarts.init(document.getElementById('trend'))
      var dfColor = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 1,
            color: '#0489f0', // 0% 处的颜色
          },
          {
            offset: 0,
            color: '#28d9e8', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      }
      var provRank = that.poductName
      const option = {
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },

          formatter: function (objs, index) {
            let obj = objs[0]
            return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value} `
          },
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          boundaryGap: false,
          inverse: true, //反向
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 18,
            formatter: function (value, index) {
              var ind = index + 1
              if (ind == 1) {
                return '{a|' + value + '}'
              } else if (ind == 2) {
                return '{b|' + value + '}'
              } else if (ind == 3) {
                return '{c|' + value + '}'
              } else {
                return '{d|' + value + '}'
              }
            },
            rich: {
              a: {
                color: '#303133',
              },
              b: {
                color: '#303133',
              },
              c: {
                color: '#303133',
              },
              d: {
                color: '#303133',
              },
            },
          },
          data: provRank,
        },
        series: [
          {
            name: '',
            barMaxWidth: 20,
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'insideLeft',
                formatter: '{c}',
                textStyle: {
                  color: '#fff',
                },
              },
            },
            data: that.zhuxingdata,
          },
        ],
      }
      trend.setOption(option)
    },
    //需求趋势
    requestTrend() {
      let reqTrend = this.$echarts.init(document.getElementById('requestTrend2'))
      let option = {
        title: {
          text: '',
        },
        backgroundColor: '#ffffff',
        color: ['#2a51bc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false, // 缺省为 false
              },
            },
          },
        },
        legend: {
          data: ['每日需求趋势'],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },

        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2020/9/1', '2020/9/2', '2020/9/3', '2020/9/4', '2020/9/5', '2020/9/6', '2020/9/7'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '需求',
            type: 'line',
            stack: '总量',
            areaStyle: {
              color: ['#2a51bc'],
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      }
      reqTrend.setOption(option)
    },

    //  全区需求分布占比
    GetProportionMap() {
      let that = this
      let reqTrend = this.$echarts.init(document.getElementById('requestTrend1'))
      let option = {
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        toolbox: {
          show: true,
        },
        legend: {
          show: false,
          type: 'scroll',
          orient: 'vertical',
          left: '10%',
          align: 'center',
          top: 'middle',
          textStyle: {
            color: '#8C8C8C',
          },
        },
        series: [
          {
            name: '全区需求分布占比',
            type: 'pie',
            radius: [0, 150],

            data: that.poductData,
          },
        ],
      }

      reqTrend.setOption(option)
    },
  },
  mounted() {
    setTimeout(() => {
      this.showMap()
      this.showTrend()
      this.requestTrend()
      this.GetProportionMap()
    }, 1000)
  },
}
</script>

<style lang="less" scoped>
.box {
  // box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.098039);
  border-radius: 4px;
  .item_box {
    margin-right: 20px;
    background-color: #ffffff;
    box-shadow: 0px 5px 20px 0px rgba(64, 114, 238, 0.1);
    border-radius: 2px;
    padding: 20px;
    i {
      font-size: 41px;
      vertical-align: middle;
      margin-right: 30px;
    }
    .col_0da9b0 {
      color: #0da9b0;
    }
    .col_2a51bc {
      color: #2a51bc;
    }

    &:nth-child(4) {
      margin-right: 0;
    }
  }
}
.image {
  background-image: url(../../assets/logo.png);
  background-size: contain;
  //设置背景图片不平铺
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  margin-right: 30px;
}
.font {
  font-family: '微软雅黑 Regular', '微软雅黑';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  margin-bottom: 0 !important;
  color: #909399;
}
.num {
  // font-family: '微软雅黑 Regular', '微软雅黑';
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  color: #333333;
  margin-bottom: 0 !important;
}
.mouseOn:hover {
  cursor: pointer;
  color: #1890ff !important;
}
.active {
  color: rgb(0 0 0) !important;
  text-decoration: underline;
}
.twoFont {
  margin-right: 20px;
  font-family: 'Arial Negreta', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #999999;
}
::v-deep .ant-card {
  .ant-card-body {
    padding-top: 10px;
  }
}
.ant-form {
  position: relative;
  top: 13px;
  left: 20px;
  display: inline-block;
  width: 60%;
  .ant-form-item {
    margin-bottom: 0;
  }
}
.item_nav_top {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 10px;
  a {
    text-decoration: none;
  }
  .active_a {
    color: #1890ff;
    position: relative;
    &::before {
      position: absolute;
      content: '';
      left: 0;
      bottom: -15px;
      width: 80px;
      height: 2px;
      background-color: #1890ff;
    }
  }
}

.wz_title {
  font-size: 22px;
  letter-spacing: 0px;
  color: #909399;
  margin-top: 100px;
}
.jd_title {
  color: #333333;
}
.item_bot {
  background-color: #ffffff;
  font-size: 22px;
  color: #303133;
  .item_bot_navbar {
    p {
      margin-bottom: 0 !important;
    }
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>
